<template>
	<view class="big-box flex-col align-center">
		<!-- <top-navigation backIconColor='#FFF' bgColor="#CC1D1D" :isFix='true' :isShow='true'>
			<text slot='center-slot' class="center-slot">机场贵宾厅</text>
		</top-navigation> -->
		<!-- <view class="nav-box  align-center" :style="{top:calculateHeight}"> -->
		<view class="nav-box  align-center" >
			<view class="search-box align-center">
				<u-search shape="square" :clearabled="true" v-model='searchKey' placeholder='搜索休息室' :showAction='false'
					></u-search>
			</view>
			<view class="justify-start align-center">
				<view class="location">
					沈阳
				</view>
				<view class="triangle">

				</view>
			</view>
		</view>
		<view class="tab-type">
			<view @tap="$navto(`/trainvip/detail/detail?id=${item.id}`)" class="tab-type-item justify-between" v-for="(item,index) in tabList" 
			:key="index"
			v-if="tabCurrent==0">
				<x-img class="goods-img" :src="item.cover" radius='8rpx' width="280rpx" height="280rpx"></x-img>
				<view class="goods-info flex-col justify-between">
					<view class="">
					<view class="goods-name u-line-1">
						{{item.title}}
					</view>
					<view class="goods-desc justify-start flex-wrap">
						<view class="tag " v-for="v,k in item.tag" :key="k">
							{{v.title}}
						</view>
					</view>
					<!-- <view class="rate">
						<u-rate 
						readonly
						size='30rpx'
						gutter='11rpx'
						active-color='#BD202F'
						inactive-color='#818181'
						:count="5" v-model="item.rate"></u-rate>
					</view> -->
						
					</view>
					<view class="goods-price u-line-1">
						{{item.tips}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	export default {
		props: {
			scrollTop: {
				default: 0,
			}
		},
		data() {
			return {
				loading:false,
				isMsg: false,
				location: '沈阳',
				searchKey: '',
				oldscrollTop: 0,
				pageListData: {},
				tabCurrent: 0,
				current: 0,
				current2: 0,
				tabList: [],
				pageInfo: {
					page: 1,
					row: 10,
					total: 1,
				},

				banner: [

				],
				vip_list: [],
				home_text: [],
				info_list: [],
				list2: [{
					name: '礼宾车',
					ind: 0,
				}, {
					name: '权益卡',
					ind: 1,
				}, {
					name: '餐饮服务',
					ind: 2,
				}, {
					name: '辽品甄选',
					ind: 3,
				}, ]
			}
		},
		onReachBottom() {
			if(this.pageInfo.page>=this.pageInfo.last_page){
				console.log('最后一页');
				return
			}else{
				if(this.loading) return
				this.loading = true
				
				this.pageInfo.page++
				this.getList()
			}
			console.log('上拉触底');
		},
		computed: {
			calculateHeight() {
				return `calc(${this.statusHeight}px + ${88}rpx)`;
			},
			bannerHeight() {
				return `calc(${this.statusHeight}px + ${88+112}rpx)`;
			},
			calculateStatusBar() {
				return `${this.statusHeight}px`;
			},
			zIndex() {
				if (this.oldscrollTop < this.scrollTop) {
					this.oldscrollTop = this.scrollTop
					return this.scrollTop > 10
				} else {
					this.oldscrollTop = this.scrollTop
					return false
				}
			}
		},
		onLoad() {
			this.getList()
		},
		methods: {
			...mapActions(['getTrainRoomList']),
			bannerTap(e) {
				let id = this.vip_list[e].id
				console.log(id);
			},
			async getList() {
				let res = await this.getTrainRoomList({
					...this.pageInfo,
					key:'',
				})
				this.tabList = res.data
				this.pageInfo = {
					page: res.current_page,
					row: res.per_page,
					total: res.total,
										last_page: res.last_page
				}
				this.loading = false

			}
		}
	}
</script>
<style>
	@import '/common/css/common.css';
</style>
<style lang="scss" scoped>
	.big-box {
		padding-bottom: 30rpx;
		.center-slot {
			color: #FFF;
		}

		.grid {
			display: grid;
			grid-template-columns: repeat(5, 1fr);
			width: 670rpx;
			margin-top: 42rpx;

			.grid-item {
				margin-bottom: 36rpx;
			}

			.gird-item-t {
				display: block;
				margin-top: 18rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: rgba(0, 0, 0, 0.87);
			}
		}

		.tab-type {
			margin-top: 94rpx;
			width: 670rpx;

			.tab-type-item {
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.12);
			}

			.goods-img {
				margin-right: 20rpx;
			}

			.goods-info {
				padding:0 0 25rpx ;
				flex: 1;
			}

			.goods-name {
				margin-top: 15rpx;
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
			}

			.goods-desc {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #7E7E7E;
				margin: 22rpx 0 0rpx;
				.tag{
					padding: 0 14rpx;
					height: 41rpx;
					background: #FAEBD6;
					border-radius: 5rpx 5rpx 5rpx 5rpx;
					
					font-weight: 400;
					font-size: 22rpx;
					color: #B99361;
					margin:0 12rpx 12rpx 0;
					line-height: 41rpx;
					
				}
			}
			.rate{
			}
			.goods-price {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 26rpx;
				color: #818181;
			}
		}

		.tab {
			width: 670rpx;
			width: 100%;
			padding: 0 40rpx;
			z-index: 10;
			background: #ffffff;
			position: sticky;

			.tab-item {
				font-family: Source Han Sans SC, Source Han Sans SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #000000;
			}
		}

		.banner-2 {
			width: 670rpx;
			height: 279rpx;
			border-radius: 30rpx 30rpx 30rpx 30rpx;
			overflow: hidden;
		}

		.banner {
			position: relative;
			z-index: 3;
			width: 670rpx;
			height: 303rpx;
			margin-top: 40rpx;
			border-radius: 30rpx;
			overflow: hidden;
			transition: all 1s;
		}

		.indicator {
			justify-content: center;

			&__dot {
				height: 6px;
				width: 6px;
				border-radius: 100px;
				background-color: rgba(255, 255, 255, 0.35);
				margin: 0 5px;
				transition: background-color 0.3s;

				&--active {
					width: 18px;
					background-color: #ffffff;
				}
			}
		}

		.nav-fix {
			position: fixed;
			top: 0;
			left: 0;
			transition: all 1s;
		}


		.nav-tit {
			position: fixed;
			z-index: 1;
			left: 53rpx;
		}

		.nav-box {
			position: fixed;
			left: 0;
			width: 100vw;
			background: #CC1D1D;
			z-index: 1;
			padding: 0 51rpx 22rpx 40rpx;

			.location {
				font-weight: 500;
				font-size: 32rpx;
				color: #FFFFFF;
				margin: 0 8rpx 0 37rpx;
			}

			.triangle {
				margin-top: 4rpx;
				width: 0;
				height: 0;
				border-top: 14rpx solid #FFF;
				border-right: 14rpx solid transparent;
				border-left: 14rpx solid transparent;
			}
		}





		.dot {
			width: 13rpx;
			height: 13rpx;
			background: #DB4949;
			border-radius: 50%;
			position: absolute;
			top: -4rpx;
			right: 0;
		}

		.search-box {
			width: 539rpx;
			height: 72rpx;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			overflow: hidden;
			// background: rgba(255, 255, 255, 0.6);
			// border-radius: 30rpx 30rpx 30rpx 30rpx;
		}

	}
</style>